//1. 向外共享一个vuex模块
export default {
  // 1.1 为当前模块开启命名空间
  namespaced: true,

  // 1.2模块的 state 数据，返回一个购物车数组
  state: () => ({
    // 购物车的数组，用来存储购物车中每个商品的信息对象
    // 每个商品的信息对象，约定都包含如下 6 个属性：
    // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
    //cart: [] //购物车数组，[]弊端是当页面刷新后，购物车数据被清空了
    
    //重新赋值，让购物车的数量始终保持从本地存储同步获取
    cart: JSON.parse(uni.getStorageSync('cart') || '[]')
  }),

  // 1.3 模块的 mutations: {} 方法
  mutations: {
    //封装添加购物车的方法
    addToCart(state, goods) { //通过find()进行对比
      const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
      //console.log(findResult) //如果没有该条数据，将输出undefined

      if (!findResult) { //如果购物车没有该商品，则追加到购物车
        state.cart.push(goods)
      } else { //否则，如果已经有，则数量+1
        findResult.goods_count++
      }
      //console.log(state.cart) //将输入购物车数组的长度，即有几条商品记录
      //调用保存到本地的方法commit(保存到本地的方法)
      this.commit('m_cart/saveToStorage')
    },

    //封装存储到本地的方法saveToStorage(state)
    saveToStorage(state) {
      uni.setStorageSync('cart', JSON.stringify(state.cart))
    },
    
    //更新购物车中商品的勾选状态
    updateGoodsState(state,goods){
      //保存经过循环的查找的结果
      const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
      
      //如果找到
      if(findResult){
        //修改该商品项的选中状态
        findResult.goods_state = goods.goods_state
        
        //同时，进行持久化存储 到本地(调用已经封装好的方法即可)
        this.commit('m_cart/saveToStorage')
      }
    },
    
    //更新商品的数量
    updateGoodsCount(state,goods){
      const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
      if(findResult){//如果值存在
        findResult.goods_count = goods.goods_count //更新数量
        this.commit('m_cart/saveToStorage') //并触发外部事件，持久化存储到本地
      }
    },
    
    //根据 Id 删除对应的商品
    removeGoodsById(state,goods_id){
      //拿着过滤到的商品 id，跟传过来的商品 id 进行比较，如果不相等 
      state.cart = state.cart.filter(x => x.goods_id !== goods_id)
      
      //持久化保存本地
      this.commit('m_cart/saveToStorage')
    }，
    
    //更新购物车中所有商品的勾状态
    updateAllGoodsState(state,newState){
      state.cart.forEach(x => x.goods_state = newState)
      //持久化保存本地
      this.commit('m_cart/saveToStorage')
    }
  },

  //1.4  模块的 getters 属性(数据包装器)
  // 模块的 getters 属性
  getters: {
    // 动态统计购物车中商品的总数量
    total(state) {
      // let c = 0
      // // 循环统计商品的数量，累加到变量 c 中
      // state.cart.forEach(x => c += x.goods.goods_count)
      // return c
      //用 reduce() 来修改上述3行代码
      return state.cart.reduce((total,item) => total += item.goods_count, 0) //0相当于let c = 0 中的 0
    },
    // 所有已勾选商品的总数量
    checkedCount(state){ //已勾选商品的总数量
      //后面return表示返回的total，前面return表示对应勾选状态的所有商品总数，作为checkedCount()的值
      return state.cart.filter(x => x.goods_state).reduce((total,item) =>{return total += item.goods_count},0) //es6优化 {return total ...} 为 total += item.goods_count,0
    },
    
    //统计已勾选商品的总价
    checkedGoodsAmount(state){
      //赛  选  状  态  为  已  勾  选  的 商品     再循环计算这些商品的总价  再取小数点后2位
      return state.cart
      .filter(x => x.goods.state)
      .reduce((total,item) => total += item.goods_count * item.goods_price, 0)
      .toFixed(2)
    }
  }
}  
  //2. 在store.js中导入这个模块cart.js，命名为moduleCart，
  //   并录入modules: {'m_cart' : moduleCart}
  
  //3. 可以在商品详情页goods_detail.vue中按需导入使用vuex了！！
